<template>
	<div id="home">
		<Nav-bar class="home-nav"><div slot="center">购物街</div></Nav-bar>
		<TabControl class="tab-control" :titles="['流行','新款','精选']" @tabclick="tabclick"
		ref="tabControl1" v-show="isTabFixed"></TabControl>
		<Scroll class="content" ref="scroll" :probeType="3" @scroll="contentScroll"
		:pullUpload="true" @pullingUp="loadMore">
			<HomeSwiper :banners="banners" @swpiperImageLoad="swpiperImageLoad"></HomeSwiper>
			<RecommendView :recommends="recommends"></RecommendView>
			<FeatureView>
			</FeatureView>
			<TabControl class="tab-control" :titles="['流行','新款','精选']" @tabclick="tabclick"
			ref="tabControl2"></TabControl>
			<GoodsList :goods="showGoods"></GoodsList>
		</Scroll>
		<BackTop @click.native="backClick" v-show="isshow"></BackTop>
	</div>
</template>

<script>
	import NavBar from "../../components/common/navbar/NavBar.vue"
	import {getHomeMultiData,getHomeGoods} from "../../netword/home.js"
	import HomeSwiper from './childComps/HomeSwiper.vue'
	import RecommendView from './childComps/RecommendView.vue'
	import FeatureView from './childComps/FeatueView.vue'
	import TabControl from '../../components/tabControl/tabControl.vue'
	import GoodsList from '../../components/goods/GoodsList.vue'
	import Scroll from '../../components/common/scroll/Scroll.vue'
	import BackTop from '../../components/backTop/backTop.vue'
	import {debounce} from '../../assets/common/utils.js'
	export default{
		name:"Home",
		components:{
			NavBar,HomeSwiper,RecommendView,FeatureView,TabControl,GoodsList,Scroll,BackTop
		},
		data() {
			return{
				banners:[],
				recommends:[],
				goods:{
					'pop':{page:0,list:[]},
					'new':{page:0,list:[]},
					'sell':{page:0,list:[]},
				},
				currentType:'pop',
				isshow:false,
				tabOffsetTop:0,
				isTabFixed:false,
				saveY:0
			}
		},
		computed:{
			showGoods(){
				return this.goods[this.currentType].list
			},
			// pop1() {
			// 	return this.goods.pop.list
			//  }
		},
		activated() {
			this.$refs.scroll.refresh()
			this.$refs.scroll.scrollTo(0,this.saveY,0)
		},
		deactivated() {
			this.saveY=this.$refs.scroll.getScrollY()
		},
		created(){
			this.getHomeMultiData()
			this.getHomeGoods('pop')
			this.getHomeGoods('new')
			this.getHomeGoods('sell')
		},
		mounted() {
			this.tabOffsetTop=this.$refs
			const refresh=debounce(this.$refs.scroll.refresh,200)
			this.$bus.$on('itemImageLoad',()=>{
				refresh()
			})
		},
		// watch:{
		// 	pop1() {
		// 		this.$nextTick(function () {
		// 			this.$refs.homeScroll.scrollStar();
		// 		})
		// 	}
		// },
		methods:{
			//图片加载完成获取值
			swpiperImageLoad(){
        this.tabOffsetTop=this.$refs.tabControl2.$el.offsetTop
			},
			contentScroll(position){
				// console.log(position)
				this.isshow=(-position.y)>1000 //判断显示
				this.isTabFixed=(-position.y) > this.tabOffsetTop
			},
			loadMore(){
				this.getHomeGoods(this.currentType)
				this.$refs.scroll.scroll.refresh()
			},
			backClick(){
				this.$refs.scroll.scroll.scrollTo(0,0,1000)
			},
			tabclick(index){
				switch(index){
					case 0:
					this.currentType='pop'
					break
					case 1:
					this.currentType='new'
					break
					case 2:
					this.currentType='sell'
				}
				this.$refs.tabControl1.currentIndex=index
				this.$refs.tabControl2.currentIndex=index
			},
			getHomeMultiData(){
				getHomeMultiData().then(res=>{
				this.banners=res.data.banner.list;
				this.recommends=res.data.recommend.list
			})
			},
			getHomeGoods(type){
				const page=this.goods[type].page+1
				getHomeGoods(type,page).then(res=>{
				 this.goods[type].list.push(...res.data.list)
				 this.goods[type].page+=1
				 this.$refs.scroll.finishPullUp()
			})
			}
		}
	}
</script>

<style scoped>
	#home{
		height: 100vh;
	}
.home-nav{
	background-color: var(--color-tint);
	color: white;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
}

.tab-control{
	position: sticky;
	top: 44px;
	z-index:9;
	background-color: white;
}
.content{
	overflow: hidden;
	position: absolute;
	top: 44px;
	bottom: 49px;
	left: 0px;
	right: 0px;
}
</style>
